<template>
  <div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :title="'同步商品至巧易商城'" :visible.sync="newIndexVisible" width="80%" append-to-body :before-close="close">
      <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
        <el-form-item label="通知类型">
          <el-select v-model="queryParams.type" clearable placeholder="请选择通知类型" style="width:100%" @clear="clearSelect">
            <el-option
              v-for="(item, index) in typeOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="list" style="width: 100%;" size="mini">
        <el-table-column label="ID" align="center" prop="id" />
        <el-table-column label="通知描述" align="center" prop="type_name" />
        <el-table-column label="通知类型" align="center" prop="type" />
        <el-table-column label="商品名称" align="center" prop="notify_data.goods_name" />
        <!--      <el-table-column label="商品名称" align="center" prop="notify_data.source_order_no" />-->
        <el-table-column label="商品SPU" align="center" prop="notify_data.goods_spu" />
        <el-table-column label="通知状态" align="center">
          <template slot-scope="scope">
            <span style="display: flex;justify-content: center;align-items: center;">{{ scope.row.status }}
              <el-popover trigger="hover" placement="top">
                <p>{{ scope.row.remark }}</p>
                <div slot="reference" class="name-wrapper">
                  <i v-if="scope.row.status == '失败'" class="el-icon-question" style="margin-left: 5px;" />
                </div>
              </el-popover>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" />
        <el-table-column label="通知时间" align="center" prop="created_at" />
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.limit"
        :layout="'total,prev, next'"
        @pagination="getList"
      />

    </el-dialog>
  </div>
</template>
<script>
import {
  getNewNotifyList
} from '@/api/externalGoods'

export default {
  name: 'NewIndex',
  components: {},

  props: {
    newIndexVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 查询参数
      queryParams: {
        page: 1,
        limit: 10
      },
      typeOptions: [
        { label: '商品新增', value: 'goods.add' },
        { label: '商品更新', value: 'goods.update' },
        { label: '商品上架', value: 'goods.shelve' },
        { label: '商品下架', value: 'goods.unshelve' },
        { label: '商品价格库存更新', value: 'goods.price' },
        { label: '商品库存更新', value: 'goods.stock' },
        { label: '订单发货', value: 'order.send' },
        { label: '订单状态更新', value: 'order.status' },
        { label: '售后处理更新', value: 'after.sale.status' },
        { label: '物流轨迹', value: 'track.info' }
      ],
      tableColumns: [
        { label: '通知描述', prop: 'type_name' },
        { label: '通知类型', prop: 'type' },
        { label: '通知状态', prop: 'status' },
        { label: '通知状态', prop: 'created_at' }

        // 其他固定的列配置
      ],
      tableData: [] // 表格数据
    }
  },
  watch: {
    'open': function(newValue, oldValue) {
      if (newValue) {
        this.getList()
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 清空单选框key
    clearSelect() {
      delete this.queryParams.type
    },
    /** 查询清单列表 */
    getList() {
      this.loading = true
      getNewNotifyList(this.queryParams).then(response => {
        console.log('____', response.data)
        this.list = response.data.data

        this.list.forEach(item => {
          if (item.status == 1) {
            item.status = '成功'
          } else {
            item.status = '失败'
          }
        })
        this.total = response.data.count
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        page: 1,
        limit: 10,
        brand_name: undefined
      }
      this.handleQuery()
    },
    close() {
      this.$emit('update:newIndexVisible', false)
    }
  }
}
</script>

